<template>
  <div class="reportDetailContainer">
    <!-- 头部 -->
    <van-nav-bar title="能耗监测" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <div class="vedioContainer">
      <!--tab标签-->
      <ul class="f tabul">
        <li
          class="tabli f fc"
          v-for="(item, index) in tabNav"
          :key="index"
          @click="tabTap(index, item)"
        >
          <span class="title" :class="{ titleAct: tabIndex == index }">{{
            item.text
          }}</span>
        </li>
      </ul>
      <!-- 预警 -->
      <div class="yujin">
        <div class="weather f fb">
          <div class="middleCont_left fl">
            <p class="marginbot">
              <span>{{ totalNum }}</span>
            </p>
            <p>总量({{ totalModelType }})</p>
          </div>
          <div class="middleCont_middle"></div>
          <div class="middleCont_left fl">
            <p class="marginbot">
              <span>{{ totalPrice }}</span>
            </p>
            <p>总费用（元）</p>
          </div>
        </div>
      </div>
    </div>
    <div class="tabDiv f fb">
      <!--tab标签-->
      <ul class="f tabul">
        <li
          class="tabli f fc mar90"
          v-for="(item, index) in dateNav"
          :key="index"
          @click="timeSlotFn(index, item.id)"
        >
          <span class="title" :class="{ titleAct: dayIndex == index }">{{
            item.name
          }}</span>
        </li>
      </ul>
      <div class="enery_foot right f fb">
        <span class="last el-icon-arrow-left" @click="nextTime"></span>
        <span class="text">{{ timeText }}</span>
        <span
          class="last textright el-icon-arrow-right"
          @click="lastTime"
        ></span>
      </div>
    </div>
    <div class="reportCont">
      <!-- 实时总用电量统计 -->
      <div class="cont">
        <div class="contTitle f fs">
          <van-icon name="arrow" class="right" />{{ chart1Text }}
        </div>
        <div class="echartDiv" id="echarts"></div>
      </div>
      <div class="cont">
        <div class="contTitle f fs">
          <van-icon name="arrow" class="right" />{{ chart2Text }}
        </div>
        <div class="echartDiv" id="main"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  GetEnergyTypeList,
  GetModelTypeList,
  GetEnergyConsumptionDayByType,
  GetEnergyConsumptionWeekByType,
  GetEnergyConsumptionMonthByType,
  GetEnergyConsumptionYearByType,
  GetEnergyConsumptionConsumeDayByType,
  GetEnergyConsumptionConsumeWeekByType,
  GetEnergyConsumptionConsumeMonthByType,
  GetEnergyConsumptionConsumeYearByType,
  GetDefaultModelId,
  DaySetting,
  WeekSetting,
  MonthSetting,
  YearSetting,
  GetDaySetting,
  GetWeekSetting,
  GetMonthSetting,
  GetYearSetting,
  GetConsumptionRecord,
  ConsumptionRecordExport,
} from "@/api/api";
var projectId = localStorage.getItem("projectid");

export default {
  data() {
    return {
      tabIndex: 0,
      dayIndex: 0,
      tabNav: [], //能耗类型
      type: "",
      energyCode: "", //耗能类型-code
      modelType: [], //能耗区域/能耗类型---根据能耗类型变换
      curModelType: "",
      modelCode: "", //能耗区域-code
      timeText: "",
      dateNav: [
        { id: 1, name: "日" },
        { id: 2, name: "周" },
        { id: 3, name: "月" },
        { id: 4, name: "年" },
      ],
      timeSlot: 1, //年月日
      count: 0, //底部时间加减
      nowTime: 0, // 当前时间毫秒数
      displayTime: 0, // 当前时间毫秒数--用于周
      //总费用
      showPriceEchart: true, //是否显示价格Echarts
      totalModelType: "kw·h", //耗能类型--单位  kw·h-电  t-水  大卡-耗热/耗冷  m³-耗气
      totalNum: 0,
      totalPrice: 12,
      ModelId: "",
      myChart: null, // 计费图表对象
      myChartOne: null, // 耗能总量图表对象
      thresholdParams: [
        { code: 1, text: "耗电（日）", value: "" },
        { code: 2, text: "耗水（日）", value: "" },
      ],
      optionOne: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          // top: 30,
          // data: []
          show: false,
        },
        toolbox: {},
        grid: {
          x: 15, //据左边距离
          y: 30, //据上边距离
          x2: 30, //据右边距离
          y2: 20, //据下边距离
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            nameTextStyle: {
              fontSize: 10,
              color: "#000",
            },
            axisLine: {
              lineStyle: {
                color: "#CFD3E3",
              },
            },
            axisLabel: {
              fontSize: 10,
              color: "#989A9C",
            },
            // nameLocation: 'start',
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "(电量:kw·h)",
            nameTextStyle: {
              fontSize: 10,
               color: "#000",
            },
            axisLine: {
              lineStyle: {
                color: "#CFD3E3",
              },
            },
            axisLabel: {
              fontSize: 10,
              color: "#989A9C",
            },
            // nameLocation: 'start'
          },
        ],
        series: [],
      }, // 能耗用量统计图表对象
      option: {
        color: ["#657884"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          x: 5, //据左边距离
          y: 30, //据上边距离
          x2: 35, //据右边距离
          y2: 20, //据下边距离
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
            nameTextStyle: {
              fontSize: 10,
               color: "#000",
            },
            axisTick: {
              alignWithLabel: true,
            },
             axisLine: {
              lineStyle: {
                color: "#CFD3E3",
              },
            },
            axisLabel: {
              fontSize: 10,
              color: "#989A9C",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              fontSize: 10,
               color: "#000",
            },
             axisLine: {
              lineStyle: {
                color: "#CFD3E3",
              },
            },
            axisLabel: {
              fontSize: 10,
              color: "#989A9C",
            },
          },
        ],
        series: [],
      },
      chart1Text: "实时总用电量统计",
      chart2Text: "耗电量计费统计",
    };
  },
  created() {
    this.initTimeText(new Date(), this.timeSlot);
    let nowTime = new Date(); // 当前时间
    this.nowTime = nowTime.getTime(); // 当前时间毫秒数
  },
  mounted() {
    this.myChartOne = this.$echarts.init(document.getElementById("echarts"));
    // 计费统计图表
    this.myChart = this.$echarts.init(document.getElementById("main"));
    this.getEnergyType();
    this.getModelId(); //获取模型id
  },
  methods: {
    //获取默认的模型id
    getModelId() {
      this.Request(GetDefaultModelId({ projectId: projectId })).then((res) => {
        if (res.StatusCode == 200) {
          this.ModelId = res.Result;
          this.getConfirm(); //获取阈值
          // this.getCurrentChange(); //获取能耗提醒的相关数据
        } else {
          this.$message({
            type: "error",
            message: res.Message ? res.Message : "后台异常",
            center: "true",
          });
        }
      });
    },
    getEnergyType() {
      //获取能耗类型
      this.Request(GetEnergyTypeList()).then((res) => {
        if (res.StatusCode == "200") {
          this.tabNav = res.Detiel || [];
          this.type = this.tabNav[0].id;
          this.energyCode = this.tabNav[0].code;
          this.getTypeList();
        } else {
          this.$message({
            type: "error",
            message: res.message,
            center: "true",
          });
        }
      });
    },
    //更换能耗类型-的时候---获取模式类型列表  GetModelTypeList
    getTypeList() {
      this.Request(GetModelTypeList({ TypeID: this.type })).then((res) => {
        if (res.StatusCode == 200) {
          var text = { id: "", text: "全部" };
          this.tabNav.forEach((item) => {
            if (item.id == this.type) {
              this.energyCode = item.code;
            }
          });
          this.modelType = res.Detiel;
          this.modelType.unshift(text);
          this.curModelType = this.modelType[0].id;
          this.modelCode =
            this.modelType[0].text == "全部" ? "" : this.modelType[0].text;
          this.getDateNumber(); //获取计量Echart
          this.getMonthEchart(); //获取计费Echart
        } else {
          this.$message({ type: "error", message: res.Message });
        }
      });
    },
    //计量统计计算
    getDateNumber() {
      let fn = {};
      var text = {
        energyCode: this.energyCode,
        TypeCode: this.modelCode,
        projectId: projectId,
      };
      switch (this.timeSlot) {
        case 1:
          text["date"] = this.timeText;
          fn = GetEnergyConsumptionDayByType(text);
          break;
        case 2:
          text["weekStartDate"] = this.timeText.split(" - ")[0];
          fn = GetEnergyConsumptionWeekByType(text);
          break;
        case 3:
          text["date"] = this.timeText;
          fn = GetEnergyConsumptionMonthByType(text);
          break;
        case 4:
          text["year"] = this.timeText; // 统计年份
          fn = GetEnergyConsumptionYearByType(text);
          break;
      }
      this.Request(fn).then((res) => {
        if (res.StatusCode === 200) {
          let list = res.Detiel;
          this.billingStatistics(list); //显示量的Echarts
          this.totalStatistics(list); //显示总量
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
    },
    //计费显示的数据相关信息
    getMonthEchart() {
      let fn = {};
      var text = {
        energyCode: this.energyCode,
        TypeCode: this.modelCode,
        projectId: projectId,
      };
      switch (this.timeSlot) {
        case 1:
          text["date"] = this.timeText;
          fn = GetEnergyConsumptionConsumeDayByType(text);
          break;
        case 2:
          // text['weekStartDate'] =  new Date(this.displayTime).toLocaleDateString().replace(/\//g, '-') // 统计周的第一天
          text["weekStartDate"] = this.timeText.split(" - ")[0];
          fn = GetEnergyConsumptionConsumeWeekByType(text);
          break;
        case 3:
          text["date"] = this.timeText;
          fn = GetEnergyConsumptionConsumeMonthByType(text);
          break;
        case 4:
          text["year"] = this.timeText; // 统计年份
          fn = GetEnergyConsumptionConsumeYearByType(text);
          break;
      }
      this.Request(fn).then((res) => {
        if (res.StatusCode === 200) {
          let list = res.Detiel;
          this.moneyStatistics(list); //显示量的Echarts
          this.totalPriceStatistics(list); //显示总量
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
    },
    //显示总费用
    totalPriceStatistics(list) {
      let temp = 0;
      list.forEach((item) => {
        temp += Number(item.Value);
      });
      this.totalPrice = (Math.floor(temp * 100) / 100).toFixed(2);
    },
    //显示总量
    totalStatistics(list) {
      let temp = 0;
      list.forEach((item) => {
        item.Chart.forEach((obj) => {
          obj.Data.forEach((value) => {
            temp += Number(value.value);
          });
        });
      });
      this.totalNum = (Math.floor(temp * 100) / 100).toFixed(2);
    },
    //显示echarts的数量
    billingStatistics(list) {
      // 处理x轴数据
      switch (this.timeSlot) {
        case 1:
          this.optionOne.xAxis[0].data = [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
          ];
          this.optionOne.xAxis[0].name = "(小时)";
          break;
        case 2:
          this.optionOne.xAxis[0].data = [
            "日",
            "一",
            "二",
            "三",
            "四",
            "五",
            "六",
          ];
          this.optionOne.xAxis[0].name = "(星期)";
          break;
        case 3:
          this.optionOne.xAxis[0].data = [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
          ];
          this.optionOne.xAxis[0].name = "(日)";
          break;
        case 4:
          this.optionOne.xAxis[0].data = [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
          ];
          this.optionOne.xAxis[0].name = "(月)";
          break;
      }
      // 处理y轴标题
      switch (this.energyCode) {
        case "POWER":
          (this.optionOne.yAxis[0].name = "(电量:kw·h)"),
            (this.totalModelType = "kw·h"),
            (this.chart1Text = "实时总用电量统计");

          break;
        case "WATER":
          (this.optionOne.yAxis[0].name = "(水量:t)"),
            (this.totalModelType = "t"),
            (this.chart1Text = "实时总用水量统计");

          break;
      }

      // 设置图表数据
      this.optionOne.series = [];
      list.forEach((item) => {
        item.Chart.forEach((obj) => {
          this.optionOne.legend = {
            show: true,
            top: 30,
          };
          // 设置图表数据
          this.optionOne.series.push({
            name: obj.CategoryName,
            type: "bar",
            areaStyle: { normal: {} },
            stack: "one",
            data: obj.Data,
          });
        });
      });
      // 配置图表标线
      this.optionOne.series.forEach((item) => {
        item["markLine"] = {
          symbol: ["none", "none"],
          label: {
            position: "middle",
            // formatter: '阈值：{c}'
            formatter: "",
          },
          lineStyle: {
            normal: {
              type: "dotted",
              color: "rgba(44, 61, 123, 1)",
              width: 1,
            },
          },
          data: [
            {
              yAxis: list[0].ThresholdValue,
            },
          ],
        };
        //console.log("阈值：", list[0].ThresholdValue);
        // item["markArea"] = {
        //   data: [
        //     [
        //       {
        //         coord: [0, list[0].ThresholdValue],
        //         x: "84.5%",
        //         label: {
        //           show: true,
        //           formatter: ["阈值：" + list[0].ThresholdValue].join("\n"),
        //           position: "right",
        //           backgroundColor: "#333",
        //           borderRadius: 5,
        //           fontFamily: "SourceHanSansCN-Normal",
        //           fontWeight: 400,
        //           // fontSize: 16,
        //           color: "#fff",
        //           padding: 10,
        //         },
        //         itemStyle: {
        //           opacity: 0.8,
        //         },
        //       },
        //       {
        //         coord: [0, list[0].ThresholdValue],
        //         x: "84.5%",
        //       },
        //     ],
        //   ],
        // };
      });
      // 更新图表
      this.myChartOne.setOption(this.optionOne, true);
    },
    //显示总费用
    moneyStatistics(list) {
      // 处理x轴数据
      switch (this.timeSlot) {
        case 1:
          this.option.xAxis[0].data = [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
          ];
          this.option.xAxis[0].name = "（小时）";
          break;
        case 2:
          this.option.xAxis[0].data = [
            "日",
            "一",
            "二",
            "三",
            "四",
            "五",
            "六",
          ];
          this.option.xAxis[0].name = "（星期）";
          break;
        case 3:
          this.option.xAxis[0].data = [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
          ];
          this.option.xAxis[0].name = "（日）";
          break;
        case 4:
          this.option.xAxis[0].data = [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
          ];
          this.option.xAxis[0].name = "（月）";
          break;
      }
      // 处理y轴标题
      switch (this.energyCode) {
        case "POWER":
          this.chart2Text = "耗电量计费统计";

          break;
        case "WATER":
          this.chart2Text = "耗水量计费统计";

          break;
      }
      // 处理y轴标题
      this.option.yAxis[0].name = "（金额:元）";
      // 设置图表数据
      this.option.series = [];
      let dlist = [];
      let count = 0;
      let totalValue = 0;
      list.forEach((item) => {
        dlist.push(item.Value);
        // 计算总值与数量，求平均值
        count++;
        totalValue += Number(item.Value);
      });
      this.option.series.push({
        name: "收费小记（元）",
        type: "line",
        data: dlist,
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#DFFFF7", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#94F5CD", // 100% 处的颜色
                },
              ],
            },
            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          },
        },
      });
      // 平均值
      let average = (totalValue / count).toFixed(2);
      // 配置图表标线
      this.option.series.forEach((item) => {
        item["markLine"] = {
          symbol: ["none", "none"],
          label: {
            position: "middle",
            formatter: "",
          },
          lineStyle: {
            normal: {
              type: "dotted",
              color: "rgba(44, 61, 123, 1)",
              width: 1,
            },
          },
          data: [
            {
              yAxis: average,
            },
          ],
        };
        // item["markArea"] = {
        //   data: [
        //     [
        //       {
        //         coord: [0, average],
        //         x: "84%",
        //         label: {
        //           show: true,
        //           formatter: ["平均值：" + average].join("\n"),
        //           position: "right",
        //           backgroundColor: "#333",
        //           // backgroundColor: {
        //           //   image: '../../../assets/imgs/bg_echarts.png'
        //           //   // 这里可以是图片的 URL，
        //           //   // 或者图片的 dataURI，
        //           //   // 或者 HTMLImageElement 对象，
        //           //   // 或者 HTMLCanvasElement 对象。
        //           // },
        //           borderRadius: 5,
        //           fontFamily: "SourceHanSansCN-Normal",
        //           fontWeight: 400,
        //           // fontSize: 16,
        //           color: "#fff",
        //           padding: 10,
        //         },
        //         itemStyle: {
        //           opacity: 0.8,
        //         },
        //       },
        //       {
        //         coord: [0, average],
        //         x: "84%",
        //       },
        //     ],
        //   ],
        // };
      });
      // 更新图表
      this.myChart.setOption(this.option, true);
    },
    //点击切换年月日
    timeSlotFn(index, num) {
      this.dayIndex = index;
      this.timeSlot = num;
      this.count = 0; //更改的时候--吧加减的值请0
      this.initTimeText(new Date(), num);
      this.getDateNumber(); //获取计量Echart
      this.getMonthEchart(); //获取计费Echart
      this.getConfirm(); //获取当前的阈值
    },
    //点击切换的时候/页面开始加载的时候--获取页脚的时间显示
    initTimeText(nowTime, slot) {
      let year = nowTime.getFullYear();
      let month = nowTime.getMonth() + 1;
      let day = nowTime.getDate();
      let sevenDay = 0;
      let syear = 0;
      let smonth = 0;
      let sday = 0;
      switch (slot) {
        case 1:
          this.timeText = year + "-" + month + "-" + day;
          break;
        case 2:
          sevenDay = new Date(nowTime.getTime() + 24 * 60 * 60 * 7000); // 7天
          syear = sevenDay.getFullYear();
          smonth = sevenDay.getMonth() + 1;
          sday = sevenDay.getDate();
          this.timeText =
            year +
            "-" +
            month +
            "-" +
            day +
            " - " +
            syear +
            "-" +
            smonth +
            "-" +
            sday;
          break;
        case 3:
          this.timeText = year + "-" + month;
          break;
        case 4:
          this.timeText = year;
          break;
      }
    },
    //点击页脚的减号--改变时间
    nextTime() {
      this.count--;
      this.handleTime();
    },
    //点击页脚的加号--改变时间
    lastTime() {
      this.count++;
      this.handleTime();
    },
    //改变时间的时候--底部时间展示--------------未完成（折线图/柱状图）
    handleTime() {
      let multiplier = 0; // 乘数

      let nowTime = new Date(this.nowTime);
      switch (this.timeSlot) {
        case 1:
          multiplier = 24 * 60 * 60 * 1000; // 一天的毫秒数
          this.displayTime = this.nowTime + multiplier * this.count;
          break;
        case 2:
          multiplier = 24 * 60 * 60 * 1000 * 7; // 一周的毫秒数
          this.displayTime = this.nowTime + multiplier * this.count;
          break;
        case 3:
          var temp = new Date(nowTime.getFullYear(), nowTime.getMonth() + 1, 0);
          var dayCount = temp.getDate(); // 获取当前月份的天数
          multiplier = 24 * 60 * 60 * 1000 * dayCount; // 当前月份毫秒数
          this.displayTime = this.nowTime + multiplier * this.count;
          break;
        case 4:
          var nowYear = nowTime.getFullYear() + this.count; // 当前年份
          this.displayTime = nowTime.setFullYear(nowYear);
          break;
      }
      // 初始化页面底部展示的时间----另外没有加改变柱状图与折线图的函数
      this.initTimeText(new Date(this.displayTime), this.timeSlot);
      this.getDateNumber(); //获取左边Echarts相关数据
      this.getMonthEchart(); //获取计费Echart
    },
    //阈值设定
    confirm() {
      let fn = {};
      let text1 = {
        ModelId: this.ModelId,
        PowerConsumptionDay: this.thresholdParams[0].value,
        WaterConsumptionDay: this.thresholdParams[1].value,
        HeatConsumptionDay: "",
        LengConsumptionDay: "",
        AirConsumptionDay: "",
      };
      let text2 = {
        ModelId: this.ModelId,
        PowerConsumptionWeek: this.thresholdParams[0].value,
        WaterConsumptionWeek: this.thresholdParams[1].value,
        HeatConsumptionWeek: "",
        LengConsumptionWeek: "",
        AirConsumptionWeek: "",
      };
      let text3 = {
        ModelId: this.ModelId,
        PowerConsumptionMonth: this.thresholdParams[0].value,
        WaterConsumptionMonth: this.thresholdParams[1].value,
        HeatConsumptionMonth: "",
        LengConsumptionMonth: "",
        AirConsumptionMonth: "",
      };
      let text4 = {
        ModelId: this.ModelId,
        PowerConsumptionYear: this.thresholdParams[0].value,
        WaterConsumptionYear: this.thresholdParams[1].value,
        HeatConsumptionYear: "",
        LengConsumptionYear: "",
        AirConsumptionYear: "",
      };
      switch (this.timeSlot) {
        case 1:
          fn = DaySetting(text1);
          break;
        case 2:
          fn = WeekSetting(text2);
          break;
        case 3:
          fn = MonthSetting(text3);
          break;
        case 4:
          fn = YearSetting(text4);
          break;
      }
      this.Request(fn).then((res) => {
        if (res.StatusCode === 200) {
          this.$message({
            type: "success",
            message: res.Message,
            center: "true",
          });
          this.threshold = false;
          this.getDateNumber();
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
    },
    //根据年月周日--获取阈值
    getConfirm() {
      var fn = {};
      var text = { modelId: this.ModelId };
      switch (this.timeSlot) {
        case 1:
          fn = GetDaySetting(text);
          break;
        case 2:
          fn = GetWeekSetting(text);
          break;
        case 3:
          fn = GetMonthSetting(text);
          break;
        case 4:
          fn = GetYearSetting(text);
          break;
      }
      this.Request(fn).then((res) => {
        if (res.StatusCode === 200) {
          // this.$message({type: 'success',message: res.Message,center: 'true'})
          this.thresholdParams = res.Detiel;
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
    },

    toBook() {
      this.$router.push({ path: "/bookIndex" });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    tabTap(index, item) {
      this.energyCode = item.code;
      this.tabIndex = index;
      this.type = item.id;
      this.getTypeList();
    },
  },
};
</script>
<style lang="stylus" scoped>
@import '../../assets/common';

.vedioContainer {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
}

.tabDiv {
  width: 100%;
  padding: 0 0 0 30px;
  box-sizing: border-box;

  .right {
    width: 215px;
    height: 60px;
    background: #0078CB;
    border-radius: 5px;
    color: #FFFFFF;
    margin-bottom: 30px;

    .last {
      display: inline-block;
      width: 40px;
      font-size: 30px;
    }

    .textright {
      text-align: right;
    }
  }
}

.reportCont {
  width: 100%;
  height: calc(100% - 565px);
  overflow-y: scroll;
  padding: 30px;
  box-sizing: border-box;

  .cont {
    width: 100%;
    height: 450px;
    background: #FFFFFF;
    box-shadow: 0px 14px 16px 0px rgba(43, 102, 253, 0.07);
    border-radius: 5px;
    padding: 0 30px;
    box-sizing: border-box;
    margin-bottom: 30px;

    .contTitle {
      width: 100%;
      height: 90px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 600;
      color: #000000;

      .right {
        color: #0084FF;
        font-size: 40px;
        font-weight: bold;
        margin-right: 14px;
      }
    }

    .echartDiv {
      width: 100%;
      height: calc(100% - 100px);
      box-sizing: border-box;
    }
  }
}

.tabul {
  margin-bottom: 30px;
  height: 70px;
  overflow-x: auto;

  .mar90 {
    margin-right: 90px !important;
  }

  .tabli {
    height: 100%;
    flex-shrink: 0;
    text-align: center;
    margin-right: 140px;

    .title {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #696969;
      padding-bottom: 10px;
    }

    .titleAct {
      border-bottom: 6px solid #0084FF;
      color: #0084FF !important;
    }
  }
}

.yujin {
  width: 100%;
  height: 124px;
  background: #FFFFFF;
  box-shadow: 0px 14px 16px 0px rgba(43, 102, 253, 0.07);
  border-radius: 5px;

  .weather {
    width: 100%;
    height: 100%;

    .marginbot {
      margin-bottom: 10px;
    }

    .middleCont_left {
      text-align: center;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #282828;

      span {
        font-size: 36px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #0078CB;
        margin-left: 15px;
      }
    }

    .middleCont_middle {
      width: 1px;
      height: 70px;
      background: rgba(53, 146, 243, 0.47);
    }
  }
}
</style>